<script setup>
import {reactive, ref} from "vue";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

let docEditor = ref(null)
let data = reactive({
    dialog:false,
    maximizedToggle:true,
    config:{
        document: {
            fileType: "docx",
            key: '',
            title: "预览文件",
            url: ""
        },
        documentType: "word",
        editorConfig: {
          mode: 'view',
          // user: {
          //   id: 'user1',
          //   name: '用户示例'
          // }
        }
    }
})

const openDialog = (downloadLink) => {
    if (data.dialog) {
        data.dialog = false;
        return
    }
    data.config.document.url = downloadLink;
    data.config.document.key = "Isaac"+Math.random();
    data.dialog = !data.dialog;
}
const doSome = () => {
  const editorInstance = window.DocEditor.instances['docEditor']
  // 要插入的内容
  const contentToInsert = "这是插入到指定位置的内容。";
  // 获取 OnlyOffice 编辑器的实例
  // 定位到文档的指定位置，这里假设定位到文档开头（位置 0）
  const position = 0;
  editorInstance.document.setSelection(position, 0);
  // 插入内容到文档中
  editorInstance.document.insertText(contentToInsert);
}
const onDocumentReady = (e) => {
    console.log("Document is loaded",e);
}
defineExpose({
    openDialog,
    onDocumentReady
})
</script>

<template>
    <q-dialog
        v-model="data.dialog"
        persistent
        :maximized="data.maximizedToggle"
        transition-show="slide-up"
        transition-hide="slide-down">
        <q-card class="bg-dark text-white">
            <div class="close-office" @click="openDialog">
                <span>收起文件</span>
                <q-icon name="swap_vert"></q-icon>
            </div>
            <div class="close-office close-office1" @click="doSome">
              <span>写入</span>
            </div>
            <DocumentEditor
                v-if="data.dialog"
                id="docEditor"
                ref="docEditor"
                documentServerUrl="http://www.flopsai.cn:8098/"
                :config="data.config"
                :events_onDocumentReady="onDocumentReady"
            />
        </q-card>
    </q-dialog>
</template>

<style scoped lang="scss">
.close-office{
    text-align: center;
    line-height: 40px;
    position: absolute;
    width: 100px;
    height: 40px;
    background-color: #a43f3f;
    font-weight: bold;
    right: 20%;
    border-bottom-right-radius: 20px!important;
    border-bottom-left-radius: 20px!important;
    transition: all .3s;
    cursor: pointer;
    box-shadow: 0 0 10px 0 #000;
    i{
        font-size: 24px;
        position: relative;
        top:-3px
    }
}
.close-office1{
  right: 10%;
}
.close-office:hover{
    height: 50px;
    transition: all .3s;
    line-height: 50px;
}
</style>
